<template>
  <div class="m-login-index">
    <div class="m-login-container">
      <div class="m-login m-app-container">
        <w-form-validate @on-validate="onValidate">
          <div class="login">
            <p class="shaow-title">忘记密码</p>
            <!-- 手机号 -->
            <div class="item m-code clearfix">
              <div class="m-code-item fl">
                <span class="icon icon-user"></span>
                <div class="login-input">
                  <w-input holder="手机号码" rule="isEmpty|isMobile" error="请输入手机号|请输入正确手机号" v-model="phone"></w-input>
                </div>
              </div>
              <div class="fr">
                <w-button-timer type="forgot" :is-phone="phone"></w-button-timer>
              </div>
            </div>
            <div class="item">
              <span class="icon icon-msgcode"></span>
              <div class="login-input">
                <w-input holder="短信验证码" rule="isEmpty" error="请输入验证码" v-model="smsCode"></w-input>
              </div>
            </div>
            <div class="item">
              <span class="icon icon-pwd"></span>
              <div class="login-input">
                <w-input type="password" holder="设置密码" rule="isEmpty|isPassword" error="请输入密码|密码格式错误" v-model="pwd"></w-input>
              </div>
            </div>
            <div class="item">
              <span class="icon icon-pwd"></span>
              <div class="login-input">
                <w-input type="password" holder="重复密码" rule="isEmpty|isPassword" error="请输入重复密码|密码格式错误" v-model="repwd"></w-input>
              </div>
            </div>
            <div class="options">
              <button class="btn">确认提交</button>
            </div>
          </div>
        </w-form-validate>
      </div>
    </div>
  </div>
</template>

<script>
import { apiForgot } from 'js/api'

export default {
  data() {
    return {
      phone: '',
      pwd: '',
      repwd: '', // 重复密码
      smsCode: ''
    }
  },
  methods: {
    /**
     * 提交
     */
    onValidate() {
      if (this.pwd && this.pwd != this.repwd) {
        this.$toast('两次密码不一致')
        this.repwd = ''
        return
      }
      apiForgot(this.phone, md5(this.pwd), this.smsCode).then(data => {
        this.$toast('请重新登录', () => {
          this.$router.push('/login')
        })
      })
    }
  }
}
</script>

<style lang="scss">
.m-login-index {
  .form-control {
    border: none;
    padding: 0;
    height: 42px;
  }
  .w-input .error-tip {
    margin-top: 44px;
  }
}
</style>

<style lang="scss" scoped>
@import '../scss/_var.scss';
.m-login-index {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 632px;
}
.m-login-container {
  background: url(../assets/pg.png) no-repeat;
  background-size: cover;
  height: 632px;
  // height: calc(100% - 102px);
}
.m-login {
  position: relative;
  
  .login {
    width:414px;
    height:427px;
    background-color: $color-white;
    top: calc(100% - -114px);
    position: absolute;
    right: 0;
    padding: 30px 36px;
    .shaow-title {
      font-size: 24px;
      color: $color-main;
      text-shadow:0px 2px 4px rgba(253,191,194,1);
      margin-bottom: 30px;
      text-align: center;
    }
  }
}
.item {
  width: 100%;
  height: 44px;
  border: 1px solid #DDDDDD;
  margin-bottom: 20px;
  .icon {
    padding: 0 10px;
    &::before {
      content: '';
      width: 12px;
      height: 24px;
      padding-left: 8px;
      display: inline-block;
      vertical-align: middle;
      background-size: cover;
    }
  }
  .icon-user::before {
    background: url(../assets/icon_phone.png) no-repeat;
  }
  .icon-pwd::before {
    background: url(../assets/icon_pwd.png) no-repeat;
  }
  .icon-msgcode::before {
    background: url(../assets/icon_msgcode.png) no-repeat;
  }
  .login-input {
    width: 80%;
    display: inline-block;
  }
}
.m-code {
  border: none;
  .m-code-item {
    width: 64%;
    border: 1px solid #DDDDDD;
  }
  .login-input {
    width: 70%;
  }
}
.re-pwd {
  span {
    cursor: pointer;
  }
}
.options {
  .btn {
    width:340px;
    height:47px;
    font-size: 16px;
    color: #FDF2F4;
    cursor: pointer;
    margin: 0 auto 10px;
    background:linear-gradient(90deg,rgba(255,81,47,1) 0%,rgba(243,26,43,1) 100%);
    box-shadow:2px 2px 4px 0px rgba(249,163,171,1);
    border-radius:5px;
  }
}
</style>


